<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯 - 企业官网</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0D2E88',
                        accent: '#FF7D00',
                        dark: '#1D2939',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
        }
    </style>
</head>
<body class="font-sans text-dark bg-light">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/95 shadow-sm backdrop-blur-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16 md:h-20">
                <div class="flex items-center">
                    <a href="/" class="flex items-center">
                        <span class="text-primary text-2xl font-bold">xxxx科技有限公司</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="/" class="text-dark hover:text-primary font-medium transition-colors duration-200">首页</a>
                    <a href="/products" class="text-dark hover:text-primary font-medium transition-colors duration-200">产品中心</a>
                    <a href="/about" class="text-dark hover:text-primary font-medium transition-colors duration-200">关于我们</a>
                    <a href="/news" class="text-primary font-medium">新闻资讯</a>
                    <a href="/cases" class="text-dark hover:text-primary font-medium transition-colors duration-200">典型案例</a>
                    <a href="/jobs" class="text-dark hover:text-primary font-medium transition-colors duration-200">招贤纳士</a>
                    <a href="/contact" class="text-dark hover:text-primary font-medium transition-colors duration-200">联系我们</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button type="button" id="menu-toggle" class="text-dark hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
            <div class="container mx-auto px-4 py-3 space-y-2">
                <a href="/" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">首页</a>
                <a href="/products" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">产品中心</a>
                <a href="/about" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">关于我们</a>
                <a href="/news" class="block py-2 text-primary font-medium">新闻资讯</a>
                <a href="/cases" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">典型案例</a>
                <a href="/jobs" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">招贤纳士</a>
                <a href="/contact" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="bg-primary/5 py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">新闻资讯</h1>
            <div class="flex items-center mt-2">
                <a href="/" class="text-gray-500 hover:text-primary transition-colors duration-200">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                <span class="text-primary">新闻资讯</span>
            </div>
        </div>
    </section>

    <!-- 新闻列表 -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {% for news_item in news %}
                <div class="bg-light rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 hover-scale">
                    {% if news_item.image_url %}
                    <img src="{{ news_item.image_url }}" alt="{{ news_item.title }}" class="w-full h-52 object-cover">
                    {% else %}
                    <div class="w-full h-52 bg-gray-100 flex items-center justify-center">
                        <span class="text-gray-400">暂无图片</span>
                    </div>
                    {% endif %}
                    <div class="p-6">
                        <div class="flex items-center text-gray-500 text-sm mb-3">
                            <i class="fa fa-calendar-o mr-2"></i>
                            <span>{{ news_item.publish_date.strftime('%Y-%m-%d') }}</span>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-3 hover:text-primary transition-colors duration-200">
                            <a href="{{ url_for('news_detail', id=news_item.id) }}">{{ news_item.title }}</a>
                        </h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">{{ news_item.summary or news_item.content[:100] }}</p>
                        <a href="{{ url_for('news_detail', id=news_item.id) }}" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors duration-200">
                            阅读更多 <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- 分页 -->
            {% if pagination.pages > 1 %}
            <div class="flex justify-center mt-12">
                <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                    {% if pagination.has_prev %}
                    <a href="{{ url_for('news', page=pagination.prev_num) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fa fa-chevron-left"></i>
                    </a>
                    {% else %}
                    <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-400 cursor-not-allowed">
                        <i class="fa fa-chevron-left"></i>
                    </span>
                    {% endif %}
                    
                    {% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=3) %}
                    {% if page_num %}
                    {% if pagination.page == page_num %}
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                        {{ page_num }}
                    </span>
                    {% else %}
                    <a href="{{ url_for('news', page=page_num) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                        {{ page_num }}
                    </a>
                    {% endif %}
                    {% else %}
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                        ...
                    </span>
                    {% endif %}
                    {% endfor %}
                    
                    {% if pagination.has_next %}
                    <a href="{{ url_for('news', page=pagination.next_num) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fa fa-chevron-right"></i>
                    </a>
                    {% else %}
                    <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-400 cursor-not-allowed">
                        <i class="fa fa-chevron-right"></i>
                    </span>
                    {% endif %}
                </nav>
            </div>
            {% endif %}
        </div>
    </section>

    <!-- 底部 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <h3 class="text-xl font-bold mb-6">xxxx科技有限公司</h3>
                    <p class="text-gray-400 mb-6">我们致力于为客户提供最优质的产品和服务，满足您的各种需求。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="/" class="text-gray-400 hover:text-white transition-colors duration-200">首页</a></li>
                        <li><a href="/products" class="text-gray-400 hover:text-white transition-colors duration-200">产品中心</a></li>
                        <li><a href="/about" class="text-gray-400 hover:text-white transition-colors duration-200">关于我们</a></li>
                        <li><a href="/news" class="text-gray-400 hover:text-white transition-colors duration-200">新闻资讯</a></li>
                        <li><a href="/cases" class="text-gray-400 hover:text-white transition-colors duration-200">典型案例</a></li>
                        <li><a href="/jobs" class="text-gray-400 hover:text-white transition-colors duration-200">招贤纳士</a></li>
                        <li><a href="/contact" class="text-gray-400 hover:text-white transition-colors duration-200">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">北京市海淀区xxxxxxx</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">186xxxxxxxx3 或 010-xxxxxxxx1</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">123456@qq.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">周一至周五: 9:00 - 18:30</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">关注我们</h3>
                    <div class="bg-white/10 p-4 rounded-lg text-center">
                        <img src="https://picsum.photos/150/150?random=2" alt="微信公众号" class="w-32 h-32 mx-auto mb-3 rounded-lg">
                        <p class="text-gray-400 text-sm">扫描二维码关注公众号</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row md:justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 xxxx科技有限公司. 保留所有权利.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">网站地图</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 在线客服 -->
    <div id="chat-widget" class="fixed bottom-6 right-6 z-50">
        <button id="chat-toggle" class="bg-primary hover:bg-primary/90 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all duration-300 focus:outline-none">
            <i class="fa fa-comments text-xl"></i>
        </button>
        
        <div id="chat-box" class="hidden bg-white rounded-xl shadow-2xl w-80 h-[400px] flex flex-col mt-4 transform transition-all duration-300">
            <div class="bg-primary text-white p-4 rounded-t-xl flex items-center justify-between">
                <h3 class="font-bold">在线客服</h3>
                <button id="chat-close" class="text-white hover:text-white/80 transition-colors duration-200">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="flex-1 p-4 overflow-y-auto" id="chat-messages">
                <div class="flex items-start mb-4">
                    <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
                        <p>您好！有什么可以帮助您的吗？</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-200 p-4">
                <div class="flex">
                    <input type="text" id="chat-input" placeholder="输入消息..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200">
                    <button id="chat-send" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors duration-200">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 在线客服
        document.addEventListener('DOMContentLoaded', function() {
            const chatToggle = document.getElementById('chat-toggle');
            const chatBox = document.getElementById('chat-box');
            const chatClose = document.getElementById('chat-close');
            const chatInput = document.getElementById('chat-input');
            const chatSend = document.getElementById('chat-send');
            const chatMessages = document.getElementById('chat-messages');
            
            chatToggle.addEventListener('click', function() {
                chatBox.classList.toggle('hidden');
                if (!chatBox.classList.contains('hidden')) {
                    chatInput.focus();
                }
            });
            
            chatClose.addEventListener('click', function() {
                chatBox.classList.add('hidden');
            });
            
            function addMessage(text, isUser = false) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `flex items-start mb-4 ${isUser ? 'justify-end' : ''}`;
                
                let avatar, bgClass;
                if (isUser) {
                    avatar = '<i class="fa fa-user"></i>';
                    bgClass = 'bg-primary text-white';
                } else {
                    avatar = '<i class="fa fa-headphones"></i>';
                    bgClass = 'bg-gray-100 text-dark';
                }
                
                messageDiv.innerHTML = `
                    <div class="${isUser ? 'mr-0 ml-3' : 'mr-3 ml-0'} bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                        ${avatar}
                    </div>
                    <div class="rounded-lg p-3 max-w-[80%] ${bgClass}">
                        <p>${text}</p>
                    </div>
                `;
                
                chatMessages.appendChild(messageDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            chatSend.addEventListener('click', function() {
                const message = chatInput.value.trim();
                if (message) {
                    addMessage(message, true);
                    chatInput.value = '';
                    
                    // 模拟回复
                    setTimeout(() => {
                        addMessage('感谢您的咨询，我们会尽快回复您！');
                    }, 800);
                }
            });
            
            chatInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    chatSend.click();
                }
            });
        });
    </script>
</body>
</html>